---
name: Set up webpack config 2
route: /installation2
menu: Installation
---

# Set up webpack config 2

Copy only asset files and load Cesium partially.

In this way, imported and used Cesium's source codes are bundled to your app's source code with webpack.

See also: [example project](https://github.com/darwin-education/resium/tree/master/example/webpack.config.2.js) and [Cesium's official example](https://github.com/AnalyticalGraphicsInc/cesium-webpack-example)

## 1. Install webpack plugins and loaders

```
npm install --save-dev copy-webpack-plugin css-loader style-loader url-loader strip-pragma-loader
# or
yarn add --dev copy-webpack-plugin css-loader style-loader url-loader strip-pragma-loader
```

Then, edit your webpack configuration.

## 2. Define Cesium path

```js
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";
```

Note: if you changed `context` in webpack config, you may have to change cesiumSource also to indicate node_modules path exactly. e.g. if context is `path.join(__dirname, "src")`, cesiumSource may be `../node_modules/cesium/Source`.

## 3. Add aliases

Be careful in order. Reversing them does not work.

```js
{
  resolve: {
    alias: {
      cesium$: 'cesium/Cesium',
      cesium: 'cesium/Source'
    }
  }
}
```

## 4. Add copy-webpack-plugin

Copy only asset files at build time.

```js
const CopyWebpackPlugin = require("copy-webpack-plugin");
```

```js
{
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(cesiumSource, cesiumWorkers),
          to: "Workers",
        },
        {
          from: path.join(cesiumSource, "Assets"),
          to: "Assets",
        },
        {
          from: path.join(cesiumSource, "Widgets"),
          to: "Widgets",
        },
      ],
    }),
  ];
}
```

## 5. Add definition of CESIUM_BASE_URL

Cesium refers to `CESIUM_BASE_URL` to find asset files.

```js
const webpack = require("webpack");
```

```js
{
  plugins: [
    // ...
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify(""),
    }),
  ];
}
```

Note: If `publicPath` in webpack config is changed, CESIUM_BASE_URL may have to be changed also.

## 6. Add loaders and load CSS file in the entry JS

```js
{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ];
  }
}
```

In your entry JS (e.g. index.js):

```js
import "cesium/Widgets/widgets.css";
```

## 7. Remove extra code in production build

This is optional, but it is recommended for production build.

```js
module.exports = (env, argv) => {
  const prod = argv.mode === "production";

  return {
    // ...
    module: {
      rules: [
        // ...
        ...[
          prod
            ? {
                // Strip cesium pragmas
                test: /\.js$/,
                enforce: "pre",
                include: path.resolve(__dirname, cesiumSource),
                use: [
                  {
                    loader: "strip-pragma-loader",
                    options: {
                      pragmas: {
                        debug: false,
                      },
                    },
                  },
                ],
              }
            : {},
        ]
    }
  }
}
```

## Ready!

Everything is ready! Advance to [Getting Started](/getting_started).

You can import Cesium directly:

```js
import { Cartesian3 } from "cesium";
```

Warning: `import Cesium from "cesium";` may be cause an error, as default is not exported from Cesium.

Pro tip: you can enable HMR (hot module replacement) with [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
